<template>
  <div class="container" >
    <div class="btn" @dragover.prevent @drop.prevent="drop($event)" draggable="true" @dragstart="dragstart($event)">
    </div>
  </div>

</template>

<script lang="ts">

import { ref } from "vue";
import { Toast } from "vant";

export default  {
  name: "VantPage",
  setup() {
    const count = ref(0)
    const clicked = (e: any)=>{
      count.value ++;
      Toast("hello");
    }
    const dragstart = (e: Event) => {
      e.dataTransfer.setData('text','a')
      e.dataTransfer.effectAllowed = 'move'
      // e.preventDefault()

      console.log("hello")
    }
    const drop = (e: Event) => {
      e.dataTransfer.effectAllowed = 'all'
      // e.preventDefault()
      console.log("hello")
    }
    const onDrag = (e: DragEvent) => {
      e.preventDefault()
      console.log("drag")
    }
    return {
      count,
      clicked,
      dragstart,
      onDrag,
      drop
    }
  },
  methods: {

  }

}
</script>

<style scoped>
  * {
    margin: 0px;
    padding: 0px;
  }
  .container {
    margin: 0px;
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn {
    width: 80px;
    height: 80px;
    background-color: blue;
  }
</style>